<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            background: #000;
            width: 100vw;
            height: 100vh;
            padding: 0;
            margin: 0;
        }

        .frame {
            background-image: url(https://hacks.mozilla.org/files/2017/06/benko-game.png);
            background-repeat: repeat-x;
            background-position: left center;
            width: 100%;
            height: 100%;
            clip-path: circle(80px);
        }

        [hide] {
            display: none;
        }
    </style>
</head>

<body>
<!-- <article class="frame"></article>

<script>
    let container = document.querySelector('.frame');
    const RADIUS = 80;

    document.addEventListener('mousemove', function (event) {
        let x = event.clientX;
        let y = event.clientY;

        let circle = `circle(${RADIUS}px at ${x}px ${y}px)`;
        container.style['clip-path'] = circle;
    });
</script> -->

<script>
    let htmlTitleElement = document.querySelector('title');

    const loading = {
        audio: ['resource/audio/bgm1.mp3', 'resource/audio/bgm1.mp3', 'resource/audio/bgm1.mp3'],
        img: [
            'resource/img/bg2.png',
            'resource/img/bg2.png',
            'resource/img/bg2.png',
            'https://w.wallhaven.cc/full/57/wallhaven-57o9j5.png',
            'https://w.wallhaven.cc/full/9m/wallhaven-9mjoy1.png',
            'https://w.wallhaven.cc/full/qz/wallhaven-qzdqvr.jpg'
        ]
    }

    function www(loading) {
        let count = 0;
        let total = 0;

        for (const tab in loading) {
            loading[tab].forEach(src => {
                total++;

                const el = document.createElement(tab);
                el.setAttribute('src', src);
                el.setAttribute('hide', '');
                document.body.appendChild(el);

                const event = tab == 'audio' ? 'canplay' : 'load';
                el.addEventListener(event, () => {
                    count++;
                    htmlTitleElement.innerText = `加载中 ${count} / ${total}`;
                    console.log(count);
                    if (count == total) {
                        console.log('加载完成');
                    }
                });

            });
        }
    }

    www(loading);
</script>

</body>

</html>